<template>
  <div class="register">
    <van-nav-bar :fixed="true" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="cross" color="#000000" size="25" />
      </template>
    </van-nav-bar>
    <div class="logo">
      <h3>TPSH CHAT</h3>
    </div>
    <van-form @submit="onSubmit" :validate-first="true" :colon="true" error-message-align="right">
      <van-field v-model="username" label="账号" :rules="usernameRules" />
      <van-field v-model="password" type="password" label="设置密码" :rules="passwordRules" />
      <van-field
        v-model="confirmPassword"
        type="password"
        label="确认密码"
        :rules="[{ validator, message: '两次密码不一致' }]"
      />
      <div class="login-btn">
        <van-button
          round
          block
          type="info"
          :plain="!btnActive"
          :disabled="!btnActive"
          native-type="submit"
        >注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
      confirmPassword: "",
      passwordPattern: /^(\w){6,20}$/,
      usernamePattern: /^[A-Za-z0-9]{3,18}$/,
      data: ""
    };
  },
  methods: {
    ...mapActions(["asyncSaveToken"]),
    onClickLeft() {
      this.$router.push("/home");
    },
    validator() {
      return this.password == this.confirmPassword;
    },
    onSubmit() {
      const toast = this.$toast.loading({
        duration: 0,
        message: "注册中...",
        forbidClick: true
      });
      this.axios
        .post(this.server.BaseUrl + "/register", {
          userName: this.username,
          password: this.password
        })
        .then(res => {
          toast.clear();
          if (res.data.status) {
            this.$dialog
              .confirm({
                title: "注册成功",
                message: "是否立即登录",
                showCancelButton: true,
                confirmButtonText: "登录"
              })
              .then(() => {
                this.$router.push("/login");
              })
              .catch(() => {});
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(err => {
          toast.clear();
          console.log(err);
        });
    }
  },
  computed: {
    //校验用户账号是否合法
    usernameRules: function() {
      return [
        { required: true, message: "请填写账号" },
        {
          required: true,
          message: "账号不合法",
          pattern: this.usernamePattern
        }
      ];
    },
    //校验用户密码是否合法
    passwordRules: function() {
      return [
        { required: true, message: "请填写密码" },
        {
          required: true,
          message: "密码不合法",
          pattern: this.passwordPattern
        }
      ];
    },
    btnActive: function() {
      return (
        this.username.length > 0 &&
        this.password.length > 0 &&
        this.password == this.confirmPassword
      );
    }
  },
  created() {
    this.asyncSaveToken("");
  }
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;

  .van-nav-bar {
    background-color: #ffffff;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }

  .logo {
    height: 50px;
    line-height: 50px;
    margin-top: 120px;
    text-align: center;
  }

  .van-form {
    margin-top: 40px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .login-btn {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 45px;
  }
}
</style>